<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>跨域测试</title>
</head>
<body>

<!-- HTML标签发出的请求，不会产生跨域问题 -->
<form action="http://localhost:8080/mybatis/findOne" method="get">
    <input type="submit" value="发起表单请求">
</form>

<img src="http://127.0.0.1:8080/1.jpg" alt="">

<button onclick="startSimpleAjax()">发起ajax简单请求</button>
<button onclick="startComplicatedAjax()">发起ajax复杂请求</button>

<script>
    // ajax请求才会出现跨域问题
    function startSimpleAjax() {
        fetch('http://localhost:8080/mybatis/findOne', {
            method: 'GET'
        })
    }

    // 发起ajax复杂请求
    function startComplicatedAjax() {
        fetch('http://localhost:8080/mybatis/findOne', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                id: 1,
            }),
            credentials: 'include',
        }).then(res => console.log(res))
    }
</script>

</body>
</html>